
<template>
  <!-- 面包屑导航区域 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item
      v-show="update"
      v-for="(item, index) in crumbArr"
      :key="index"
    >
      {{ item }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: 'Crumb',
  props: {
    // 被选中的项的索引数组
    indexArr: {
      type: Array,
      default () {
        return []
      }
    },
    // // 全部的表单数据
    // dataList: {
    //   type: Array,
    //   default () {
    //     return []
    //   }
    // }
  },
  data () {
    return {
      // 被选中的项的索引对应的数据的数组集
      crumbArr: [],
      dataList: [
        {
          authName: "用户管理",
          children: [{
            authName: "用户列表",
            children: [],
            id: 110,
            order: null,
            path: "users"
          }],
          id: 125,
          order: 1,
          path: "users"
        },
        {
          authName: "权限管理",
          children: [{
            authName: "角色列表",
            children: [],
            id: 111,
            order: null,
            path: "roles"
          }, {
            authName: "权限列表",
            children: [],
            id: 112,
            order: null,
            path: "rights"
          }],
          id: 103,
          order: 2,
          path: "rights"
        },
        {
          authName: "试验数据",
          children: [
            {
              authName: "二层试验",
              id: 888,
              order: 9,
              path: "text"
            }
          ],
          id: 999,
          order: 9,
          path: "text",
        }
      ],
      add: {
        authName: "试验数据",
        children: [
          {
            authName: "二层试验",
            id: 888,
            order: 9,
            path: "text"
          }
        ],
        id: 999,
        order: 9,
        path: "text",
      },
      update: false
    }
  },
  watch: {
    dataList: {
      deep: true,
      handler (nv, ov) { }
    }
  },
  created () {
    this.getMenuList()
    setTimeout(() => {
      this.deep(this.dataList)
    }, 0);
  },
  methods: {
    async getMenuList () {
      const { data: res } = await this.$http.get('/menus')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.dataList = res.data
      // console.log(this.dataList)
      this.dataList.push(this.add)
      this.update = true
      console.log(this.dataList)
    },
    deep (data) {
      data.forEach(item => {
        if (this.indexArr.length === 0) return
        if (item.id === this.indexArr[0]) {
          this.crumbArr.push(item.authName)
          this.indexArr.shift()
          if (item.children && item.children.length !== 0) {
            this.deep(item.children)
          }
        }
      })
    }
  }
}
</script>

<style>
</style>
